<template>
  <div class="main">
    <div >
      <a-card :bordered="false" :body-style="{ padding: '24px' }"
              style="width:70%;height:700px;top: 50px;margin-left:15%;border-radius: 20px;box-shadow: 2px 6px 12px 1px rgba(88,88,88,0.27)">
        <template #title>
          <h2>公司入驻</h2>
        </template>
        <el-scrollbar height="600px">

          <a-form :model="formState" :rules="rules" ref="formRef" :layout="layout" style="width: 90%">
            <a-row :gutter="24">
              <a-col :span="11">
                <a-form-item field="corporateName" label="公司名称">
                  <a-input v-model="formState.corporateName" placeholder="请输入贵公司名称"/>
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item field="corporateLevel" label="公司级别">
                  <a-select v-model="formState.corporateLevel" placeholder="请选择公司级别">
                    <a-option >上市公司</a-option>
                    <a-option >非上市公司</a-option>
                    <a-option >行业龙头</a-option>
                    <a-option >中小企业</a-option>
                    <a-option >国有企业</a-option>
                    <a-option >民营企业</a-option>
                    <a-option >外资企业</a-option>
                    <a-option >制造业企业</a-option>
                    <a-option >服务业企业</a-option>
                    <a-option >科技型企业</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" style="margin-top: 20px">
              <a-col :span="11">
                <a-form-item field="companyAddress" label="公司地址">
                  <a-input v-model="formState.companyAddress" placeholder="请输入公司地址"/>
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item field="companySize" label="公司规模">
                  <a-select v-model="formState.companySize" placeholder="请选择公司级别">
                    <a-option >500以下</a-option>
                    <a-option >1000以下</a-option>
                    <a-option >1500以下</a-option>
                    <a-option >2000以下</a-option>
                    <a-option >5000以下</a-option>
                    <a-option >5000以上</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" style="margin-top: 20px">
              <a-col :span="12">
                <a-form-item field="industryClassification" label="行业分类">
                  <a-input v-model="formState.industryClassification" type="email" placeholder="请输入行业分类"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" style="margin-top: 20px">
              <a-col :span="12">
                <a-form-item field="companyProfile" label="简介">
                  <a-input v-model="formState.companyProfile" placeholder="请输入行业简介"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" style="margin-top: 20px">
              <a-col :span="12">
                <a-form-item field="companyProfile" label="邮箱">
                  <a-input v-model="formState.email" placeholder="请输入您的邮箱方便审核通过后我们联系您"/>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="24" style="margin-top: 20px">
              <a-col :span="11">
                <a-form-item field="coverPhoto" label="公司封面图片">
                  <el-upload
                      list-type="picture-card"
                      action="http://localhost:8080/v1/file/upload"
                      v-model:file-list="fileList1"
                      limit="1"
                      :on-change="handleUpload1"
                      :on-remove="handleRemove"
                  >
                    <el-icon><Plus /></el-icon>
                  </el-upload>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="24" style="margin-top: 20px">
              <a-col :span="11">
                <a-form-item field="photoShow" label="公司展示图片">
                  <el-upload
                      list-type="picture-card"
                      action="http://localhost:8080/v1/file/upload"
                      v-model:file-list="fileList2"
                      limit="9"
                      :on-change="handleUpload2"
                      :on-remove="handleRemove"
                  >
                    <el-icon><Plus /></el-icon>
                  </el-upload>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="24" style="margin-top: 20px">
              <a-col :span="11">
                <a-form-item field="occupationPhoto" label="上传公司执照">
                  <el-upload
                      list-type="picture-card"
                      action="http://localhost:8080/v1/file/upload"
                      v-model:file-list="fileList3"
                      limit="1"
                      :on-change="handleUpload3"
                      :on-remove="handleRemove"
                  >
                    <el-icon><Plus /></el-icon>
                  </el-upload>
                </a-form-item>
              </a-col>
            </a-row>

<!--            <a-row :gutter="24" style="margin-top:20px;">-->
<!--              <a-col :span="12">-->
<!--                <a-form-item field="hrId" label="hr的id">-->
<!--                  <a-input v-model="formState.hrId" placeholder="请输入hrId"/>-->
<!--                </a-form-item>-->
<!--              </a-col>-->
<!--              <a-button type="primary" @click="addHr(formState.hrId)">添加hr</a-button>-->
<!--            </a-row>-->

<!--            <a-row :gutter="24" style="margin-top:20px;">-->
<!--              <a-col :span="12">-->
<!--                <el-text>已经添加的hr：</el-text>-->
<!--                <el-text v-for="hrInfo in HrInfo">{{hrInfo.nickname}}<br></el-text>-->
<!--              </a-col>-->
<!--            </a-row>-->

            <a-form-item>
              <a-space style="margin-top: 120px;">
                <a-button type="primary" @click="submitForm">提交</a-button>
                <a-button @click="resetForm">重置</a-button>
              </a-space>
            </a-form-item>
          </a-form>

        </el-scrollbar>
      </a-card>
    </div>
  </div>

</template>

<script setup>
import {onMounted, ref} from 'vue';
import { Form, Button, Input,Card, Row, Col, Space } from '@arco-design/web-vue';
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

//定义三个数组用于储存图片
const fileList1 = ref([]);
const fileList2 = ref([]);
const fileList3 = ref([]);

//判断是否上传图片
const handleUpload1 = () =>{
  if (fileList1.value.length > 0){//说明用户传图片了
    console.log("用户上传了图片1******************");
    let imgUrls = [];//准备数组,用来存多张图片路径
    for (let file of fileList1.value){//遍历响应式数组
      //依次遍历得到每个文件的响应路径
      let imgUrl = file.response.data;
      //每得到一个路径,就存入imgUrls数组中
      imgUrls.push(imgUrl);

    }
    //循环结束,得到所有的图片路径,将路径赋值给corporateForm对象
    formState.value.coverPhoto = imgUrls.toString();
    console.log("图片1路径：" + formState.value.coverPhoto)
  }
}

const handleUpload2 = () =>{
  if (fileList2.value.length > 0){//说明用户传图片了
    console.log("用户上传了图片2******************");
    let imgUrls = [];//准备数组,用来存多张图片路径
    for (let file of fileList2.value){//遍历响应式数组
      //依次遍历得到每个文件的响应路径
      let imgUrl = file.response.data;
      //每得到一个路径,就存入imgUrls数组中
      imgUrls.push(imgUrl);

    }
    //循环结束,得到所有的图片路径,将路径赋值给corporateForm对象
    formState.value.photoShow = imgUrls.toString();
    console.log("图片2路径：" + formState.value.photoShow)
  }
}

const handleUpload3 = () =>{
  if (fileList3.value.length > 0){//说明用户传图片了
    console.log("用户上传了图片3******************");
    let imgUrls = [];//准备数组,用来存多张图片路径
    for (let file of fileList3.value){//遍历响应式数组
      //依次遍历得到每个文件的响应路径
      let imgUrl = file.response.data;
      //每得到一个路径,就存入imgUrls数组中
      imgUrls.push(imgUrl);

    }
    //循环结束,得到所有的图片路径,将路径赋值给corporateForm对象
    formState.value.occupationPhoto = imgUrls.toString();
    console.log("图片3路径：" + formState.value.occupationalPhoto)
  }
}


const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们上传的图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success('图片移除成功!');
    }
  })
};

// 页面加载时立刻向后端申请数据
onMounted(()=>{
  // axios.get(BASE_URL + '/v1/hr/selectCompanyInfo/').then((response)=>{
  //   if(response.data.code == 2000){
  //     // let a = JSON.parse(response.data.data)
  //     // console.log("********" + a)
  //     companyName.value = response.data.data;
  //     console.log("********" + companyName.value);
  //   }
  // })
})


const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

const formRef = ref(null);
const formState = ref({
  email:'',
  corporateName: '',
  corporateLevel:'',
  coverPhoto:'',
  companyAddress:'',
  companyProfile:'',
  companySize:'',
  industryClassification:'',
  photoShow:'',
  occupationPhoto:'',
  wechatId:'',
  hrId:'',
  hrIds:[],
});
//定义一个数组用来存储从company表中的公司名并且用于下拉选择器中
let companyName = ref([

]);

const HrInfo = ref([
  {
    userId:'',
    nickname:'',
    realName:'',
  }
])

//
const showHrInfo = (id)=>{
  console.log("*******************调用后端显示用户信息")
  axios.get(BASE_URL + '/v1/hr/selectUserInfo' + id).then((response)=>{
    console.log("*******************!!!!")
    if (response.data.code == 2000){
      ElMessage.success("添加成功")
      HrInfo.value.push(response.data.data)
      console.log("***********HrInfo = " + HrInfo.value)
    }else {
      ElMessage.error("添加失败")
    }
  })
}

//添加hr
const addHr = (id) => {
  formState.value.hrIds.push(formState.value.hrId)
  formState.value.hrId = ''
  console.log("*****添加用户" + id)
  showHrInfo(id);
}

const rules = {
  corporateName: [{ required: true, message: '请填写公司' }],
  corporateLevel:[{ required: true, message: '请填写公司' }],
  coverPhoto:[{ required: true, message: '请填写公司' }],
  companyAddress:[{ required: true, message: '请填写公司' }],
  companyProfile:[{ required: true, message: '请填写公司' }],
  companySize:[{ required: true, message: '请填写公司' }],
  industryClassification:[{ required: true, message: '请填写公司' }],
  photoShow:[{ required: true, message: '请填写公司' }],
  occupationPhoto:[{ required: true, message: '请填写公司' }],
  wechatId:[{ required: true, message: '请填写公司' }],
  hrId:[{ required: true, message: '请填写公司' }],
};

const submitForm = () => {
  let data = qs.stringify(formState.value)
  console.log(data)
  axios.post( BASE_URL + '/v1/hr/addHr' , data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success("提交成功");
    }
  })
};

const resetForm = () => {
  formRef.value.resetFields();
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
}
.main {
  width: 100%;
  height: 100%;
  min-height: 105.2vh;
  min-width: 1300px;
  margin-top: -0.2%;
  background: linear-gradient(45deg, rgba(133, 148, 180, 0.71), rgb(195, 148, 243));
}
</style>